<template>
  <div>
    <el-form ref="form" inline :model="form" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="姓名:" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员编号:" prop="pid">
            <el-input v-model="form.pid" placeholder="请输入人员编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资格号码:" prop="registNum">
            <el-input v-model="form.registNum" placeholder="请输入资格号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分公司人员:" prop="branchPersonnel">
            <el-select style="width:100%;" clearable v-model="form.branchPersonnel">
              <el-option v-for="(option, index) in branchOptions" :key="index" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="专兼职:" prop="jobType">
            <el-select style="width:100%;" clearable v-model="form.jobType">
              <el-option v-for="(option, index) in jobTypeOptions" :key="index" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄:" prop="age">
            <el-select style="width:100%;" clearable v-model="form.age">
              <el-option v-for="(option, index) in ageOptions" :key="index" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="组长与否:" prop="isLeader">
            <el-select style="width:100%;" clearable v-model="form.isLeader">
              <el-option v-for="(option, index) in leadTypeOptions" :key="index" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="体系:" prop="structure">
            <el-select style="width:100%;" clearable v-model="form.structure">
              <el-option v-for="(option, index) in structureOptions" :key="index" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="资格:" prop="qualification">
            <el-select style="width:100%;" clearable v-model="form.qualification">
              <el-option v-for="(option, index) in qualificationOptions" :key="index" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资格到期:" prop="qualificationExpir">
            <el-select style="width:100%;"  clearable v-model="form.qualificationExpir">
              <el-option v-for="(option, index) in qualificationExpirOptions" :key="index" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员分层:" prop="personnelLayer">
            <el-select style="width:100%;" clearable v-model="form.personnelLayer">
              <el-option v-for="(option, index) in personnelLayerOptions" :key="index" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="月份:" prop="monthType">
            <el-select style="width:100%;" clearable v-model="form.monthType">
              <el-option v-for="(option, index) in monthTypeOptions" :key="index" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="暂停:" prop="suspension">
            <el-radio-group style="width:100%;" v-model="form.suspension">
              <el-radio v-for="(option, index) in suspensionOptions" :key="index" :label="option.value">{{ option.label
                }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间:" prop="endDate">
            <el-date-picker v-model="form.endDate" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="getQualificationList">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="getContractList">批量导出</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="handleReset">清空</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane style="width: 150px" v-for="(tab, index) in tabs" :key="index" :label="tab.label"
        :name="tab.name"></el-tab-pane>
    </el-tabs>

    <div class="table">
      <el-table border :data="tableData" style="width: 100%" max-height="400">
        <el-table-column v-for="(column, index) in cloumns" :width="column.width" :label="column.label"
          :align="column?.align || 'center'" :key="index" :fixed="column.fixed">
          <template slot-scope="scope">
            <template v-if="column?.type === 'operate'">
              <el-button @click.native.prevent="handleDeletePre(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click.native.prevent="handleDeletePre(scope.row)" type="text" size="small">代码添加</el-button>
              <el-button @click.native.prevent="handleDeletePre(scope.row)" type="text" size="small">代码查询</el-button>
            </template>
            <span v-else>
              {{ scope.row[column.prop] }}
            </span>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination background layout="prev, pager, next" :page-size="pageInfo.pageSize" :total="pageInfo.total"
        @current-change="handleChangeCurrent" />
    </div>
    <el-dialog title="提示" :visible.sync="visible" width="30%">
      <span>确认删除单号为{{ currentInfo.did }}的合同吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="handleDelete"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>

import moment from "moment";
import { getContract, delContract } from "../../api/contract";
import { queryQualification } from "../../api/qualification";
import {
  branchOptions, jobTypeOptions, ageOptions, leadTypeOptions, structureOptions,
  qualificationOptions, qualificationExpirOptions, personnelLayerOptions, monthTypeOptions, suspensionOptions, getOptionLabel, getTimeValue, QualificationStandard
} from "../../utils/qualificationData"

export default {
  name: "HrQualificationQuery",
  data() {
    return {
      tabs: [
        {
          label: '在职有效',
          name: '0',
          content: '在职有效',
          num: 0
        }, {
          label: '预计登记资格',
          name: '1',
          content: '预计登记资格',
          num: 0
        }, {
          label: '失效',
          name: '2',
          content: '失效',
          num: 0
        }, {
          label: '年度确认11月',
          name: '3',
          content: '年度确认11月',
          num: 0
        }, {
          label: '年度确认12月',
          name: '4',
          content: '年度确认12月',
          num: 0
        }, {
          label: '年度确认01月',
          name: '5',
          content: '年度确认01月',
          num: 0
        }, {
          label: '3个月内到期资格',
          name: '6',
          content: '3个月内到期资格',
          num: 0
        }
      ],

      cloumns: [
        {
          label: '姓名',
          width: '120px',
          prop: 'userName',
        }, {
          label: '年龄',
          width: '120px',
          prop: 'age',
        }, {
          label: '编号',
          width: '120px',
          prop: 'uid',
        }, {
          label: '分公司',
          width: '120px',
          prop: 'id',
        }, {
          label: '专兼职',
          width: '120px',
          prop: 'id',
        }, {
          label: '体系',
          width: '120px',
          prop: 'structure',
        }, {
          label: '标准',
          width: '120px',
          prop: 'standard',
        }, {
          label: '资格',
          width: '120px',
          prop: 'qualification',
        }, {
          label: '资格证编号',
          width: '120px',
          prop: 'registNum',
        }, {
          label: '暂停',
          width: '120px',
          prop: 'suspension',
        }, {
          label: '组长与否',
          width: '120px',
          prop: 'leadType',
        }, {
          label: '开始时间',
          width: '120px',
          prop: 'startTime',
        }, {
          label: '结束时间',
          width: '120px',
          prop: 'endTime',
        }, {
          label: '人员分层',
          width: '120px',
          prop: 'id',
        }, {
          label: '电话',
          width: '120px',
          prop: 'phone',
        }, {
          label: '备注',
          width: '120px',
          prop: 'remark',
        }, {
          label: '操作',
          width: '180px',
          align: 'left',
          fixed: 'right',
          type: 'operate',
        }
      ],


      form: {
        userName: "",
        pid: "",
        registNum: "",
        branchPersonnel: "",
        jobType: "",
        structure: "",
        qualification: "",
        qualificationExpir: "",
        personnelLayer: "",
        monthType: "",
        suspension: "",
        endDate: "",
      },

      branchOptions: branchOptions,
      jobTypeOptions: jobTypeOptions,
      ageOptions: ageOptions,
      leadTypeOptions: leadTypeOptions,
      structureOptions: structureOptions,
      qualificationOptions: qualificationOptions,
      qualificationExpirOptions: qualificationExpirOptions,
      personnelLayerOptions: personnelLayerOptions,
      monthTypeOptions: monthTypeOptions,
      suspensionOptions: suspensionOptions,

      tableData: [
      ],
      pageInfo: {
        current: 1,
        pageSize: 10,
      },
      activeName: null,
      visible: false,
      currentInfo: {},
    };
  },

  created() {
    this.getQualificationList();
  },


  methods: {
    async getQualificationList() {
      const { current, pageSize } = this.pageInfo;
      const res = await queryQualification({ ...this.form, current, pageSize });
      const { data, pageInfo } = res?.data;
      this.tableData = data?.map(item => {
        const obj = {
          ...item,
          ...item?.personnel,
        };
        obj.age = obj?.birthDate ? moment().diff(moment(obj.birthDate), 'years') : null;
        obj.suspension = getOptionLabel(obj.suspension, suspensionOptions);
        obj.leadType = getOptionLabel(obj.leadType, leadTypeOptions);
        obj.standard = getOptionLabel(obj.standard, QualificationStandard);
        obj.startTime = getTimeValue(obj.startTime);
        obj.endTime = getTimeValue(obj.endTime);
        return obj;
      });
      this.pageInfo = pageInfo;
    },

    async getContractList() {
      const { current, pageSize } = this.pageInfo;
      const res = await getContract({ ...this.form, current, pageSize });
      const { data, pageInfo } = res?.data;
      this.tableData = data?.map((x) => {
        return {
          ...x,
          time: moment(x.time).format("YYYY-MM-DD HH:mm"),
        };
      });
      this.pageInfo = pageInfo;
    },



    handleClick(tab, event) {
      console.log(tab, event);
    },

    handleChangeCurrent(index) {
      this.pageInfo.current = index;
      this.getContractList();
    },

    handleReset() {
      this.$refs["form"].resetFields();
      this.getContractList();
    },
    handleDeletePre(info) {
      this.visible = true;
      this.currentInfo = info;
    },
    async handleDelete() {
      if (!this.currentInfo.id) {
        this.$message({
          type: "warning",
          message: "无效操作",
        });
      }
      const res = await delContract({ id: this.currentInfo.id });
      if (res?.data?.code === 0) {
        this.visible = false;
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getContractList();
      }
    },
  },
};
</script>


<style scoped>
.table {
  padding-right: 20px;
}
</style>
